<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			.color {
				background-color: ghostwhite;
			}
		</style>
	</head>
	<body>
		<table width="300px" height="200px" border="0" cellspacing="1" align="center" bgcolor="gainsboro">
			<tr bgcolor="dodgerblue">
				<td>
					<input type="checkbox" class="check" name="1"/>
				</td>
				<td>菜名</td>
				<td>饭店</td>
			</tr>
			<tr class="color">
				<td>
					<input type="checkbox" class="check"/>
				</td>
				<td>地三鲜</td>
				<td>田老师</td>
			</tr>
			<tr class="color">
				<td>
					<input type="checkbox" class="check"/>
				</td>
				<td>西红柿炒鸡蛋</td>
				<td>田老师</td>
			</tr>
			<tr class="color">
				<td>
					<input type="checkbox" class="check"/>
				</td>
				<td>醋溜土豆丝</td>
				<td>田老师</td>
			</tr>
			<tr class="color">
				<td>
					<input type="checkbox" class="check"/>
				</td>
				<td>萝卜干炒黄豆儿</td>
				<td>田老师</td>
			</tr>
		</table>
		
		<script>
			window.onload = function() {
				var check = document.getElementsByClassName("check");		
				check[0].onclick = function() {
					if(check[0].name == 1) {
						for(var i = 1; i < check.length; i++) {
							check[i].checked = true;
						}
						check[0].name = 2;
					} else {
						for(var i = 1; i < check.length; i++) {
							check[i].checked = false;
						}
						check[0].name = 1;
					}
					
					for(var i = 1; i < check.length; i++) {
						check[i].onclick = function() {
							var all = true;
							for(var j = 1; j < check.length; j++) {
								if(check[j].checked == false) {
									all = false;
								}
							}
							
							check[0].checked = all; 
						}
					}
				}
			}

			
		</script>
	</body>
</html>
